<template>
  <div class="courseList">
    <!-- 课程详情页面不显示banner面包屑导航 -->
    <div class="routesInfo" v-if="watchRoute">
      <div class="container">
        <breadcrumb />
        <div class="title">
          {{ $route.meta.name }}
        </div>
      </div>
    </div>
    <router-view name="coursesNav"></router-view>
    <router-view></router-view>
  </div>
</template>

<script>
import breadcrumb from "@/components/Breadcrumb/index";
export default {
  components: {
    breadcrumb,
  },
  computed: {
    // 判断当前是否在课程详情页面
    watchRoute() {
      let flag = true;
      this.$route.matched.forEach((item) => {
        if (item.name === "Curr" || item.name === "browseDetail") {
          flag = false;
        }
      });
      return flag;
    },
  },
};
</script>

<style lang="stylus">
.courseList {
  .routesInfo {
    height: 148px;
    background-color: #003262;

    .container {
      padding-top: 13px;
      margin: 0 auto;
      max-width: 1200px;
      height: 100%;

      .title {
        margin-top: 22px;
        font-family: PMingLiU-ExtB;
        font-size: 32px;
        color: #ffffff;
      }
    }
  }
}
</style>